<p-table #primengTable [columns]="selectedColumns" [value]="tableData" 
    [scrollable]="true" scrollHeight="400px" [resizableColumns]="true"
    [style]="{width:'1000px'}" selectionMode="single" [columnResizeMode]="'expand'" 
    [(selection)]="selectedRow" [reorderableColumns]="true">

    <ng-template pTemplate="caption">
        <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle">
            <div nz-col nzSpan="4">
                <div nz-col nzSpan="6">
                    <a nz-tooltip nzTooltipTitle="新增" (click)="addNew()"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
                </div>

                <div nz-col nzSpan="6">
                    <a nz-tooltip nzTooltipTitle="删除"
                    nz-popconfirm
                    nzPopconfirmTitle="您确定要删除选中行么？"
                    (nzOnConfirm)="delete()"
                    (nzOnCancel)="cancelDelete()"
                    nzPopconfirmPlacement="top">
                    <i nz-icon nzType="minus" nzTheme="outline"></i></a>
                </div>

                <div nz-col nzSpan="6">
                    <a nz-tooltip nzTooltipTitle="修改" (click)="edit()"><i nz-icon nzType="edit" nzTheme="outline"></i></a>
                </div>
            </div>

            <div nz-col nzSpan="4">
                <div nz-col nzSpan="24">
                    <nz-select [nzMaxTagCount]="0" [nzDropdownMatchSelectWidth]="false"
                        [nzDropdownClassName]="'zzz'"
                        [nzMaxTagPlaceholder]="tagPlaceHolder" nzMode="multiple"
                        nzPlaceHolder="选择显示的列"
                        [(ngModel)]="zMultiSelecteds" [nzSize]="'small'"
                        (ngModelChange)="zorroSelected2PrimeNgSelectedCols()"
                    >
                    <nz-option *ngFor="let option of zMultiSelectorOptions" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
                    </nz-select>
                    <ng-template #tagPlaceHolder let-selectedList> {{ selectedList.length }}列 </ng-template>
                </div>
            </div>
        </div>
    </ng-template>

    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col [style.width]="'50px'">
            <col *ngFor="let col of columns" [style.width]="col.width">
        </colgroup>
    </ng-template>


    <ng-template pTemplate="header" let-columns>
        <tr>
            <th>#</th>
            <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field" pReorderableColumn>
                <span class="tableCell">{{col.header}}</span>
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData">
            <td>{{ rowIndex + 1 }}</td>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                <span class="tableCell">{{ rowData[col.field] }}</span>

                <!-- 使用 tick 管道 
                    <span class="tableCell" *ngIf="useTickPipe(col.field);else elseBlock">{{ rowData[col.field] | tick}}</span>

                <ng-template #elseBlock>
                    <span class="tableCell">{{ rowData[col.field] }}</span>
                </ng-template> -->
            </td>
        </tr>
    </ng-template>

</p-table>


<!-- 用于编辑的抽屉 -->
<nz-drawer
  [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
  [nzMaskClosable]="false" 
  [nzWidth]="360"
  [nzVisible]="drawerVisible"
  nzTitle="编辑" [nzPlacement]="drawerPlacement"
  (nzOnClose)="closeDrawer()"
>
  <form nz-form [nzLayout]="formLayout" [formGroup]="editForm">

    <div nz-col nzSpan="24">
        <nz-form-item>
            <nz-form-label nzSpan="8">编号</nz-form-label>
            <nz-form-control nzSpan="16" nzErrorTip="必填项">
                <input nz-input formControlName="sid" name="sid" id="sid" placeholder="编号" next-tab/>
            </nz-form-control>
        </nz-form-item>
    </div>

    <div nz-col nzSpan="24">
        <nz-form-item>
            <nz-form-label nzSpan="8">名称</nz-form-label>
            <nz-form-control nzSpan="16" nzErrorTip="必填项">
                <input nz-input formControlName="name" name="name" id="name" placeholder="名称" next-tab/>
            </nz-form-control>
        </nz-form-item>
    </div>
  </form>

  <div class="footer" nz-row nzType="flex" nzJustify="space-between" nzAlign="middle">

    <div nz-col nzSpan="10">
        <nz-radio-group [(ngModel)]="drawerPlacement">
            <label nz-radio nzValue="left">左</label>
            <label nz-radio nzValue="right">右</label>
        </nz-radio-group>
    </div>

    <div nz-col nzSpan="10">
        <button type="button" (click)="cancelEdit()" class="ant-btn" style="margin-right: 8px;"><span>取消</span></button>
        <button type="button" (click)="saveEdit()" class="ant-btn ant-btn-primary"><span>保存</span></button>
    </div>
  </div>
</nz-drawer>



<!-- 弹出通知 -->
<p-toast [style]="{marginTop: '80px'}" styleClass="primeng-custom-toast" key="custom" position="top-right"></p-toast>
